﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>自定义验证信息</title>
</head>
<body>
    <form id="registerForm">
        <fieldset>
            <legend>用户注册信息</legend>
            <p>
                <label for="username">姓名</label>
                <input id="username" name="username" placeholder="必填" type="text" />
            </p>
            <p>
                <label for="pwd">密码</label>
                <input id="pwd" name="pwd" placeholder="必填，至少6个字符" type="password" />
            </p>
            <p>
                <label for="confirm">确认密码</label>
                <input id="confirm" name="confirm" type="password" />
            </p>
            <p>
                <label for="email">电子邮件</label>
                <input id="email" type="text" name="email" placeholder="必填" />
            </p>
            <p>
                <label for="age">年龄</label>
                <input id="age" name="age" type="text" placeholder="必填,1~100之间" />
            </p>
            <p>
                <input class="submit" type="submit" value="Submit" />
            </p>
        </fieldset>
    </form>

    <script src="scripts/jquery-1.10.2.min.js"></script>
    <script src="scripts/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#registerForm").validate({
                submitHandler: function (form) {
                    form.submit();
                    alert("提交成功！");
                },
                rules: {
                    username: {
                        required: true
                    },
                    pwd: {
                        required: true,
                        minlength: 6
                    },
                    confirm: {
                        equalTo: "#pwd"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    age: {
                        required: true,
                        digits: true,
                        range: [1, 100]
                    }
                },
                messages: {
                    username : {
                        required: "*",
                    },
                    pwd :{
                        required: "*",
                        minlength:"密码不应少于6个字符"
                    },
                    confirm:{
                        equalTo: "两次输入的密码必须相同"
                    },
                    email: {
                        required: "*",
                        email: "请输入合格的电子邮件地址"
                    },
                    age: {
                        required: "*",
                        digits: "只允许输入数字",
                        range: "年龄必须在{0}和{1}之间"
                    }
                }
            });
        })
    </script>
</body>
</html>
